<template>
  <div class="goods contain">
    <el-table
      :data="tableData"
      style="width: 100%; overflow-x: hidden"
      @cell-click="goDetail"
      stripe
    >
      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <img :src="baseUrl + scope.row.coverImg" class="image" width="180" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.goodsName }}</b>
        </template>
      </el-table-column>
      <el-table-column label="商品分类" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.firstCategory }}</b>
        </template>
      </el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          <i style="font-size: 17px; color: red">￥{{ scope.row.price }}</i>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="medium"
            @click.stop="edit(scope.row._id, scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="medium"
            type="danger"
            @click.stop="del(scope.row._id, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改商品表单 -->
    <el-dialog
      title="修改商品"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      v-if="centerDialogVisible"
      destroy-on-close
    >
      <GoodsForm ref="product" :data="proData" :timetamp="timetamp" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upload">上 传</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import GoodsForm from "./GoodsForm.vue";
export default {
  name: "GoodsTable",
  props: ["tableData"],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      count: 0,
      data: [],
      pages: 1,
      centerDialogVisible: false,
      pid: "",
      proData: {},
      timetamp: Date.now(),
    };
  },
  methods: {
    goDetail(x) {
      this.$router.push({ path: "/detail", query: { id: x._id } });
    },
    edit(id, x, ss) {
      this.proData = {};
      this.index = x;
      this.proData = JSON.parse(JSON.stringify(ss));
      this.centerDialogVisible = true;
      /* this.axios
        .put("/api/v1/product/edit", { data: { pid: id } })
        .then((res) => {
          console.log(res);
        }); */
    },
    upload() {
      let file = this.$refs.product.file;
      console.log(this.$refs.product.product, "商品数据");
      let { price, goodsName, des, _id } = this.$refs.product.product;
      let cascader = this.$refs.product.$refs.cascader.value;
      let data = { price, goodsName, des, pid: _id };
      data.uid = this.$store.state.user._id;
      data.category = JSON.stringify(cascader);
      console.log(data);
      let formdata = new FormData();
      formdata.append("product", file);
      for (let i in data) {
        formdata.append(i, data[i]);
      }
      this.axios({
        data: formdata,
        url: "/api/v1/product/edit",
        method: "put",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        this.msg(res, this);
        this.centerDialogVisible = false;
        this.$emit("updata", res.data,this.index);
        // console.log(res);
      });
    },
    del(id, x) {
      // console.log(x);
      this.$confirm("确定要删除吗", "警告", {
        type: "warning",
        confirmButtonText: "删除",
        closeOnClickModal: false,
      })
        .then((res) => {
          this.axios
            .delete("/api/v1/product/del", {
              data: {
                pid: id,
              },
            })
            .then((res) => {
              // console.log(res);
              this.$emit("delGoods", x);
              this.msg(res, this);
            });
        })
        .catch((err) => {});
    },
  },
  created() {
    // this.data = this.props.tableData;
  },
  components: { GoodsForm },
};
</script>
<style scoped>
.goods {
  height: 100%;
  /* overflow: auto; */
}
.goods-con {
  display: flex;
  justify-content: space-around;
}
.goods-con li {
  float: left;
  width: 100%;
  height: 180px;
}
.goods-con img {
  /* height: 175px;
  width: 260px; */
  height: 100%;
}
</style>